<template>
    <div class='search'>
    <MainTitle title="搜索">
        <p>
            搜索结果如下:
        </p>
    </MainTitle>
    <PostBoxList :articleList="articleList"/>
    <Pagination 
    :total='totalArticleNumber' 
    @currentPage='getArticleList'/>
    </div>
</template>

<script setup>
    import MainTitle from '@/components/MainTitle.vue'
    import PostBoxList from '@/components/PostBoxList.vue'
    import Pagination from '@/components/Pagination.vue'
    import axios from 'axios'
    import { ref, inject, onMounted } from 'vue'

    const props = defineProps(['title', 'page', 'author'])
    const articleList = ref([])
    const totalArticleNumber = ref(0)
    const { request } = inject('global')
    
    // 通用的异步请求方法
    const getArticleList = async currentPage => {
            articleList.value.length = 0
            try {
                let response = await request.get(
                '/search/article',
                {
                    // 查询的字段
                    params: {
                        title: props.title,
                        page: currentPage
                    }
                }
                )
                //将请求的数据赋值给articleList
                articleList.value = response.data.data.list
                totalArticleNumber.value = response.data.data.count
            } catch (err) {
                console.error(err);
            }
        }

    onMounted(() => {
        getArticleList(1)
    })
</script>

<style src="@/styles/front-views/search.scss" scoped>

</style>